<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElCard, ElRow, ElCol, ElButton, ElCarousel, ElCarouselItem } from 'element-plus'

const router = useRouter()

// 特性列表
const features = ref([
  {
    title: '响应式设计',
    description: '适配各种设备屏幕，提供最佳用户体验',
    icon: '📱',
  },
  {
    title: '高性能',
    description: '基于 Vue 3 和 Vite 构建，提供极致性能',
    icon: '⚡',
  },
  {
    title: '易于使用',
    description: '简洁直观的界面设计，操作简单便捷',
    icon: '✨',
  },
  {
    title: '安全可靠',
    description: '采用最新安全技术，保障数据安全',
    icon: '🔒',
  },
])

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}

// 跳转到注册页
const goToRegister = () => {
  router.push('/register')
}
</script>

<template>
  <div class="home-container">
    <!-- 首页横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">欢迎使用管理系统</h1>
        <p class="hero-subtitle">一个现代化、功能强大的管理平台，助您提升工作效率</p>
        <div class="hero-actions">
          <!-- <el-button type="primary" size="large" @click="goToLogin">立即登录</el-button> -->
          <!-- <el-button size="large" @click="goToRegister">免费注册</el-button> -->
        </div>
      </div>
    </div>

    <!-- 特性介绍 -->
    <div class="features-section">
      <div class="section-header">
        <h2>核心特性</h2>
        <p>我们提供的功能和服务</p>
      </div>

      <el-row :gutter="30" class="features-grid">
        <el-col v-for="(feature, index) in features" :key="index" :xs="24" :sm="12" :md="6">
          <el-card class="feature-card" shadow="hover">
            <div class="feature-icon">{{ feature.icon }}</div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-description">{{ feature.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 数据展示 -->
    <div class="stats-section">
      <el-row :gutter="30">
        <el-col :xs="12" :sm="6">
          <div class="stat-item">
            <div class="stat-number">10,000+</div>
            <div class="stat-label">活跃用户</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-item">
            <div class="stat-number">99.9%</div>
            <div class="stat-label">系统可用性</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-item">
            <div class="stat-number">24/7</div>
            <div class="stat-label">技术支持</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-item">
            <div class="stat-number">100%</div>
            <div class="stat-label">安全保障</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 确保内容居中 */
}

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  padding: 80px 40px;
  text-align: center;
  margin-bottom: 50px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%; /* 确保横幅占据整个容器宽度 */
}

.features-section {
  margin-bottom: 50px;
  width: 100%; /* 确保特性介绍占据整个容器宽度 */
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.features-grid {
  margin: 0 -15px;
  display: flex;
  justify-content: space-between; /* 特性卡片均匀分布 */
}

.feature-card {
  text-align: center;
  border: none;
  border-radius: 10px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  flex: 1; /* 每个特性卡片等宽 */
  margin: 0 15px; /* 添加左右边距 */
}

.stats-section {
  background: var(--el-bg-color-page);
  border-radius: 10px;
  padding: 40px;
  margin-bottom: 50px;
  width: 100%; /* 确保数据展示占据整个容器宽度 */
}

.stat-item {
  text-align: center;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 50px 20px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 10px;
  }

  .features-grid {
    flex-direction: column; /* 移动设备上特性卡片垂直排列 */
  }

  .feature-card {
    margin: 15px 0; /* 调整移动设备上的上下边距 */
  }

  .stats-section {
    padding: 20px;
  }

  .stat-number {
    font-size: 1.5rem;
  }
}
</style>
